<template>
  <div class="app-container">
    <el-table
      :data="messages"
      element-loading-text="加载中......"
      border
      highlight-current-row
      height="1000"
      max-height="640"
    >
      <el-table-column label="ID" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="头像" height="320" width="460" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" alt="" style="height: 200px" />
        </template>
      </el-table-column>
      <el-table-column label="作者" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column label="留言" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.message }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="230">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="handleDel(scope.row.id)"
            >删除</el-button
          >
          <el-button type="warning" size="mini" @click="pomess1">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
import { deleteMessage } from "@/api/message";

export default {
  data() {
    return {
      listLoading: true,
      messages: [],
    };
  },
  created() {
    axios.get("/api/v1/getMessages").then((t) => {
      this.messages = t.data;
      // console.log(this.messages);
    });
  },
  methods: {
    pomess1() {
      const h = this.$createElement;
      this.$notify({
        title: "提示",
        message: h("i", { style: "color: teal" }, "不是我不想写，但留言哪里需要修改呀！"),
      });
    },
    pomess2() {
      const h = this.$createElement;
      this.$notify({
        title: "提示",
        message: h(
          "i",
          { style: "color: teal" },
          "有点问题，本想用id删，可id是根据size变化的。"
        ),
      });
    },
    handleDel(id) {
      this.$confirm("此操作会永久删除该留言，您还要继续吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(id);
        deleteMessage(id).then((res) => {
          location.reload(); //刷新
          this.$router.go(0);
          this.$message({
            type: "success",
            message: "留言删除成功",
          });
          // this.$notify({
          //   title: "提示",
          //   message: `留言删除成功！`,
          //   type: "success",
          // });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tag {
  margin: 0 5px;
}
.el-pagination {
  margin-top: 10px;
}
</style>
